<template>
  <div class="seller-management">
    <!-- 卖家列表表格 -->
    <el-table :data="sellerList" style="width: 100%" @row-click="handleRowClick">
      <el-table-column prop="companyName" label="企业名称" width="200" />
      <el-table-column prop="contactName" label="负责人姓名" width="150" />
      <el-table-column prop="mainProducts" label="主营农产品" width="200" />
      <el-table-column prop="address" label="详细地址" width="200" />
      <el-table-column prop="phone" label="联系电话" width="200" />
      <el-table-column prop="email" label="邮箱" width="200">
        <template #default="scope">
          <el-link type="primary" :href="'mailto:' + scope.row.email">{{ scope.row.email }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" link @click.stop="openDetailDialog(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情对话框 -->
    <el-dialog v-model="dialogVisible" title="卖家详情" width="600px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="企业名称">{{ currentSeller?.companyName }}</el-descriptions-item>
        <el-descriptions-item label="联系人姓名">{{ currentSeller?.contactName }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ currentSeller?.username }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentSeller?.phone }}</el-descriptions-item>
        <el-descriptions-item label="密码">{{ currentSeller?.password }}</el-descriptions-item>
        <el-descriptions-item label="电子邮箱">{{ currentSeller?.email }}</el-descriptions-item>
        <el-descriptions-item label="主营农产品">{{ currentSeller?.mainProducts }}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{ currentSeller?.address }}</el-descriptions-item>
        <el-descriptions-item label="身份证正面">
          <el-image style="width: 100px; height: 60px" :src="currentSeller?.idCardFront"
            :preview-src-list="[currentSeller?.idCardFront || '']" fit="cover" />
        </el-descriptions-item>
        <el-descriptions-item label="身份证反面">
          <el-image style="width: 100px; height: 60px" :src="currentSeller?.idCardBack"
            :preview-src-list="[currentSeller?.idCardBack || '']" fit="cover" />
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-popconfirm title="确定要注销该账号吗？" @confirm="handleDelete">
            <template #reference>
              <el-button type="success">通过审核</el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus' // 引入 ElMessage

// 卖家数据接口
interface Seller {
  id: number
  companyName: string
  contactName: string
  mainProducts: string
  email: string
  username: string
  phone: string
  password: string
  address: string
  idCardFront: string
  idCardBack: string
}

// 模拟卖家数据
const sellerList = ref<Seller[]>([
  {
    id: 1,
    companyName: '绿源农产品有限公司',
    contactName: '张三',
    mainProducts: '苹果、梨、桃',
    email: 'zhangsan@example.com',
    username: 'zhangsan123',
    phone: '13800138000',
    password: '******',
    address: '北京市朝阳区XX路XX号',
    idCardFront: 'https://zhihuanhuixin.oss-cn-beijing.aliyuncs.com/016e1227-7749-4cf1-9826-b54307abed3d.png',
    idCardBack: 'https://zhihuanhuixin.oss-cn-beijing.aliyuncs.com/016e1227-7749-4cf1-9826-b54307abed3d.png'
  },
  {
    id: 2,
    companyName: '丰收农业集团',
    contactName: '李四',
    mainProducts: '大米、小麦',
    email: 'lisi@example.com',
    username: 'lisi456',
    phone: '13900139000',
    password: '******',
    address: '上海市浦东新区XX路XX号',
    idCardFront: 'https://placeholder.com/idcard_front.jpg',
    idCardBack: 'https://placeholder.com/idcard_back.jpg'
  }
])

// 当前选中的卖家
const currentSeller = ref<Seller | null>(null)

// 控制详情对话框的显示
const dialogVisible = ref(false)

// 打开详情对话框
const openDetailDialog = (row: Seller) => {
  currentSeller.value = row
  dialogVisible.value = true
}

// 处理注销账号
const handleDelete = () => {
  if (currentSeller.value) {
    sellerList.value = sellerList.value.filter(seller => seller.id !== currentSeller.value.id)
    dialogVisible.value = false
    ElMessage.success('账号注册成功')
  }
}

// 点击表格行事件
const handleRowClick = (row: Seller) => {
  openDetailDialog(row)
}
</script>

<style scoped>
.seller-management {
  padding: 20px;
}
</style>